<template>
  <div>
    <span>所属企业：</span>
    <el-cascader
      v-model="company_id_arr"
      :placeholder="'选择所属企业'"
      collapse-tags
      :options="companyOptions"
      ref="cascaderRef"
      :props="{
          value:'company_id',
          label:'company_name',
          children:'newTempCompanyVos',
          expandTrigger: 'hover',
          multiple: 'true',
          checkStrictly: 'true',
         }"
      clearable
      @visible-change="companyVisibleChange"
      @remove-tag="companyRemoveTag"
      size="small"
      style="width:300px">
    </el-cascader>
    <span>所属案场：</span>
    <el-select v-model="submitCase"  @change="CaseChange" @visible-change="CaseVisibleChange" @remove-tag="CaseClick"
               filterable @filter-method="filterMethod"
               :multiple="true" size="small" collapse-tags
               placeholder="请选择案场" style="width:300px">
      <el-option
        v-for="item in caseOptions"
        :key="item.case_info_id"
        :label="item.name"
        :value="item.case_info_id">
      </el-option>
    </el-select>
    <span>所属区域：</span>
    <el-select v-model="submitArea"  @change="AreaChange" @visible-change="AreaVisibleChange" @remove-tag="AreaClick" filterable
               ref="areaRef" multiple size="small" collapse-tags
               placeholder="请选择区域" style="width:300px">
      <el-option
        v-for="item in areaOptions"
        :key="item.area_id"
        :label="item.area_name"
        :value="item.area_id">
      </el-option>
    </el-select>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        companyOptions:[],//企业list
        company_id_arr:[],
        company_id:'',

        caseOptions:[],//案场list
        submitCase:[],
        isAllCase:false,//是否全选了

        areaOptions:[],//区域list
        submitArea:[],
      }
    },
    created(){
      this.getAllList()
    },
    methods:{
      getAllList(){
        let url = '/sys/report/1.1/get-1-all-list'
        this.$api.post(url)
        .then(data=>{
          //删除最后一个子节点的newTempCompanyVos
          recursion(data.data.companyInfoList);
          function recursion(val) {
            if(val.length){
              for(let i in val){
                if(val[i].newTempCompanyVos && val[i].newTempCompanyVos.length){
                  recursion(val[i].newTempCompanyVos)
                }else{
                  delete val[i].newTempCompanyVos
                }
              }
            }
          }
          this.companyOptions = data.data.companyInfoList
          this.caseOptions = data.data.caseInfoVoList
          this.caseOptions = this.caseOptions.map(x=>{
            x.name = x.case_name+  '-(' + x.company_name + ')'
            return x
          })
          this.caseOptions.unshift({name:'全部',case_info_id:'all'});

          this.areaOptions = data.data.areaVoList
          // this.areaOptions = this.areaOptions.map(x=>x.name = x.case_name+  '-(' + x.company_name + ')')
          this.areaOptions.unshift({area_name:'全部',area_id:'all'});
          this.$Bus.$emit('Loading', false);
        })
      },
      companyVisibleChange(){

      },
      companyRemoveTag(){

      },
      //案场change事件
      CaseChange(val){
        //已经选择了全部，想要排除掉all这个选项
        if(val[0] == 'all' && val.length != 1){
          this.submitCase = this.submitCase.filter(x=>x != 'all')
          this.isAllCase = false
        }else if(val.includes('all')){//点击了全部，干掉其他选中的部分
          this.submitCase = ['all'];
          this.isAllCase = true;
        }else{
          this.isAllCase = false
        }
      },
      //案场选择改变
      CaseVisibleChange(val){
        if (!val) {
          if (this.submitCase == null) {
            this.$message.warning('该企业下无案场');
            // this.$Bus.$emit('Remove');
            return
          }
          // if (!this.submitCase.length) {
          //   this.$message.warning('请选择至少一个案场！');
          //   if (this.Case.length) {
          //     this.caseFirstTry()
          //   }
          //   this.Updata(true);
          //   return
          // }
        }
      },
      CaseClick(){

      },
      filterMethod(val){
        console.log(val,'filterMethod');
      },
      AreaChange(val){
        if (val[0] == 'all'  && val.length != 1) {
          this.submitArea = this.submitArea.filter(x => x != 'all')
          this.isAllArea = false
        } else if (val.includes('all')) {
          this.submitArea = ['all'];
          this.isAllArea = true
        }else{
          this.isAllArea = false
        }
      },
      AreaVisibleChange(){

      },
      AreaClick(){

      }

    }
  }
</script>

<style>
</style>